<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>文章分类列表</title>
	<!-- title -->
	<% include ../public/page_title.html%>
	<style>
		h4{
			font-weight: bold;
		}
		.layui-table-cell{
			height:auto;
		}
	</style>
</head>
<body class="main_body">
	<blockquote class="layui-elem-quote news_search">
		<div class="layui-inline">
			<a href="<%=adminName%>/articleCate/add" class="layui-btn layui-btn-normal newsAdd_btn">添加文章分类</a>
		</div>
	</blockquote>
	<div style="padding:0 10px ;">
		<div class="layui-form news_list">
			<table id="table"></table>
		</div>
	</div>
	<script type="text/html" id="btnTpl">
		<a href="<%=adminName%>/articleCate/edit?id={{d._id}}"  class="layui-btn layui-btn-sm" data-id='{{d._id}}'>编辑</a>
		<button class="layui-btn layui-btn-danger layui-btn-sm delete-btn" data-id='{{d._id}}'>删除</button>
	</script>
	<script type="text/html" id="switchTpl">
		<input lay-filter="switchTest" type="checkbox" name='status' data-id="{{d._id}}" {{d.status==1?'checked':''}} lay-text="显示|隐藏" name="switch" lay-skin="switch">
	</script>
	<script type="text/html" id="sortTpl">
		<input style='width:50px;height:26px;' type="text" value="{{d.sort}}"  data-id="{{d._id}}" placeholder="请输入" autocomplete="on" class="layui-input change-btn">
	</script>
	<script type="text/html" id="imgTpl">
		{{#  if(d.cate_img){ }}
		<img width='60' src='{{d.cate_img}}' class='img'/>
		{{#  } }}
	</script>
	<script type="text/javascript" src="/public/admin/layui/layui.js"></script>
	<script type="text/javascript" src="/public/admin/js/index.js"></script>
	<script type="text/javascript" src="/public/admin/js/util.js"></script>
	<script>
		layui.config({
			base:'/public/admin/module/'
		}).extend({
        	treetable: 'treetable-lay/treetable'
    	}).use(['form','layer','jquery','table', 'treetable'],function(){
			var form = layui.form,
				layer =layui.layer,
				table = layui.table,
				treetable = layui.treetable,
				$ = layui.jquery;

			var treeResult =JSON.parse('<%-list%>');
			var renderTable = function () {
				treetable.render({
					treeColIndex: 1,
					treeSpid: "0",
					height: 'full-100',
					treeIdName: '_id',
					treePidName: 'pid',
					treeDefaultClose: false,
					treeLinkage: true,
					elem: '#table',
					data: treeResult,
					limits:[1000],
					page: false,
					cols: [[ //表头
						{type: 'numbers'},
						{field: 'title', title: '分类名称',},
						{field: 'img', align:'center', width: 110, title: '分类图片',templet:'#imgTpl'},
						{field: 'sort',align:'center', title: '排序',templet:'#sortTpl'},
						{field: 'status', title: '状态', width: 95, templet:'#switchTpl'},
						{field: '', title: '操作',align:'center', width: 150, fixed: 'right',templet:'#btnTpl'},
					]],
					done: function () {
						//删除操作
						$('.delete-btn').on('click',function(){
							var id = $(this).attr('data-id');
							// alert(id);
							layer.confirm('是否删除该分类？',{
								title:'警告',
								content:'是否删除该分类？',
								btn: ['确认', '取消'], //可以无限个按钮
							}, function(index, layero){
								var url = '<%=adminName%>/articleCate/delete';
								var params = {
									model:'ArticleCate',
									id:id
								}
								//删除
								reqAjax.delete('get', url, params, "<%=adminName%>/articleCate");

							}, function(index){console.log('取消删除')});
						})
						//修改排序
						$('.change-btn').on('blur',function(){
							var id = $(this).attr('data-id');
							var val = $(this).val();
							if(val==''){
								layer.msg('请输入排序');
								$(this).focus();
								return;
							}else if(isNaN(val)){
								layer.msg('不是数字');
								$(this).focus();
								return;
							}
							var url = '<%=adminName%>/articleCate/change';
							var params = {
								model:'ArticleCate',
								attr:'sort',
								value:val,
								id:id
							}
							//改变
							reqAjax.change('get', url, params)
						})
						//状态改变
						form.on('switch(switchTest)', function(data){
							var id = $(this).attr('data-id');
							var val = this.checked;
							if(val){val=1}else{val=0}
							var url = '<%=adminName%>/articleCate/change';
							var params = {
								model:'ArticleCate',
								attr:'status',
								value:val,
								id:id
							}
							//改变
							reqAjax.change('get', url, params)
						
						});
						$('.img').on('click',function(){
							var src = $(this).attr('src');
							layer.open({
								area: '400px',
								title: '图片预览',
								content: '<img src="'+src+'" width="100%">',
							}); 
						})
					}
				});
			};
			renderTable()
		})

	</script>
</body>
</html>
